<template>
  <div class="content_box">
    <FullCalendar v-model:options="calendarOptions" />
  </div>
</template>

<script lang="ts" setup>
import multiMonthPlugin from "@fullcalendar/multiMonth";
import FullCalendar from "@fullcalendar/vue3";
import { onMounted, reactive } from "vue";

const props = defineProps(["events"]);
const calendarOptions = reactive({
  plugins: [multiMonthPlugin],
  initialView: "multiMonthYear",
  height: 550,
  eventTextColor: "white",
  headerToolbar: {
    left: "title",
    right: "prev,next, today",
  },
  eventOrderStrict: true,
  eventColor: "green",
  // 设置日程
  events: [
    { title: "event 1", start: "2023-08-25 14:22:00", color: "red", description: "description for Long Event" },
    { title: "event 1", start: "2023-08-25 14:00:00" },
    { title: "event 1", start: "2023-08-25 14:00:00" },
    { title: "event 1", start: "2023-08-25 14:00:00" },
    { title: "event 2", start: "2023-08-24 14:00:00" },
  ],
  editable: false,
  dayMaxEventRows: 2,
  locale: "zh", // 设置语言
});
onMounted(() => {
  calendarOptions.events = props.events;
});
</script>

<style lang="scss" scoped></style>
